<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
	<div class="tab">
		<div class="tab_list"> 
			<ul>
				<li class="current">价格</li>
				<li>规格与包装</li>
				<li>售后保障</li>
				<li>商品评价（50000）</li>
				<li>手机社区</li>
			</ul>
		</div>
		<div class="tab_con">
			<div class="item" style="display: block;"> 
				商品介绍模块内容
			</div>
			<div class="item" style="display: none;">
				规格与包装块内容
			</div>
			<div class="item" style="display: none;">
				售后保障模块内容
			</div>
			<div class="item" style="display: none;">
				商品评价（50000）模块内容
			</div>
			<div class="item" style="display: none;">
				手机社区模块内容
			</div>

		</div>
	</div>
<script>
	$(function(){
		// 1.点击上部的li，当前li 添加current类，其余兄弟移除类
		$(".tab_list li").click(function(){
			//链式编程操作（显示选中状态）
			$(this).addClass("current").siblings().removeClass("current");
			//2.点击的同时，得到当前li的索引号
			var index = $(this).index();
			console.log(index);
			//3.让下部里面相应索引号的item显示，其余的item隐藏
			$(".tab_con .item").eq(index).show().siblings().hide();
		});
		// 2.点击的同时，得到当前li的索引号

		// 3.让下部里面相对应索引号的item显示，其余的item隐藏

	})

</script>
 


 
 
</body>
</html>